import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'MovieDetail.dart';

class MovieScroll extends StatelessWidget {
  final List _list = [
    {
      "name": "攀登者",
      "img":
          "https://p0.meituan.net/170.230/movie/4c01895cfd53e82f7c3048c407974a6b4739229.jpg"
    },
    {
      "name": "诛仙",
      "img":
          "https://p0.meituan.net/170.230/movie/845dce25ba800e91ac591b683a0c3ba92450317.jpg"
    },
    {
      "name": "小小的愿望",
      "img":
          "https://p0.meituan.net/170.230/movie/d18915868f6e3e6e287162354700690f2338229.jpg"
    },
    {
      "name": "中国机长",
      "img":
          "https://p0.meituan.net/170.230/moviemachine/4de45617746dae456738bc322670cb88562422.jpg"
    },
    {
      "name": "名侦探柯南",
      "img":
          "https://p0.meituan.net/170.230/moviemachine/b7362f555340906684944957dfc8d5421530646.jpg"
    },
    {
      "name": "美食大冒险",
      "img":
          "https://p0.meituan.net/170.230/movie/f0614f9d08e84abfe947531c491b1cf55397550.jpg"
    },
    {
      "name": "小Q",
      "img":
          "https://p0.meituan.net/170.230/movie/c5975d98fc484027ff55d813ab3b2daa427032.jpg"
    },
  ];

  // MovieScroll({Key key, this.name}):super(key: key);
  // 这中写法也是可以的，但是我们还是建议使用系统提供的规范的写法
  MovieScroll({this.name});
  final String name;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('$name')),
      body: Center(
        child: Container(
          height: 238,
          // 根据数组遍历，一项一项去渲染页面
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: _list.length, // 传递循环的次数
            itemBuilder: (BuildContext context, int i) {
              // i代表每一次遍历的当前索引值
              return _ImgItem(
                name: _list[i]["name"],
                img: _list[i]["img"],                
              );
            },
          ),
        ),
      ),
    );
  }
}

class _ImgItem extends StatelessWidget {
  _ImgItem({Key key, @required this.img, @required this.name}) : super(key: key);
  final String img;
  final String name;

  @override
  Widget build(BuildContext context) {
    // GestureDetector 这个组件可以添加onTap事件，一般来说我们需要在某个组件上添加onTap事件，我们就把这个组件传递给GestureDetector的child属性当中
    return GestureDetector(
      child: Container(
        width: 170,
        child: Image(
          image: NetworkImage('$img'),
          fit: BoxFit.cover,
        ),
        decoration: BoxDecoration(color: Colors.green),
      ),
      onTap: (){
        // 固定写法，代表跳转页面,MaterialPageRoute是material.dart 为我们提供的一个路由组件
        Navigator.of(context).push(MaterialPageRoute(
          builder: (BuildContext context){
            // return 后面写我们需要跳转到的界面
            return MovieDetail(
              name: name,
              img: img,
            );
          }
        ));
      },
    );
  }
}
